<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <link href="/admin/images/favicon.ico" rel="icon" th:href="@{/static/admin/images/favicon.ico}"
        type="image/ico">

  <link rel="stylesheet" th:href="@{/static/admin/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/static/admin/css/materialdesignicons.min.css}">
  <link rel="stylesheet" th:href="@{/static/admin/css/style.min.css}">


  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
        name="viewport"/>

  <title th:text="上实机电进销存信息管理系统"></title>

  <!--对话框-->
  <link rel="stylesheet" th:href="@{/static/admin/js/jconfirm/jquery-confirm.min.css}">
  <style>
    .lyear-wrapper {
      position: relative;
    }

    .lyear-login {
      display: flex !important;
      min-height: 100vh;
      align-items: center !important;
      justify-content: center !important;
    }

    .login-center {
      background: #fff;
      min-width: 38.25rem;
      padding: 2.14286em 3.57143em;
      border-radius: 5px;
      margin: 2.85714em 0;
    }

    .login-header {
      margin-bottom: 1.5rem !important;
    }

    .login-center .has-feedback.feedback-left .form-control {
      padding-left: 38px;
      padding-right: 12px;
    }

    .login-center .has-feedback.feedback-left .form-control-feedback {
      left: 0;
      right: auto;
      width: 38px;
      height: 38px;
      line-height: 38px;
      z-index: 4;
      color: #dcdcdc;
    }

    .login-center .has-feedback.feedback-left.row .form-control-feedback {
      left: 15px;
    }
  </style>
</head>

<body>
<div class="row lyear-wrapper">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <a href="index.html"> <img alt="jpademo admin"
                                   th:src="@{/static/admin/images/logo-sidebar.png}"> </a>
      </div>
      <form action="#!" id="login_form" method="post">
        <div class="form-group has-feedback feedback-left">
          <input class="form-control" id="username" name="username" placeholder="请输入您的用户名"
                 type="text"/>
          <span aria-hidden="true" class="mdi mdi-account form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input class="form-control" id="password" name="password" placeholder="请输入密码"
                 type="password"/>
          <span aria-hidden="true" class="mdi mdi-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback feedback-left row">
          <div class="col-xs-7">
            <input class="form-control " id="capcha" maxlength="4" name="capcha" placeholder="验证码"
                   type="text">
            <span aria-hidden="true" class="mdi mdi-check-all form-control-feedback "></span>
          </div>
          <div class="col-xs-5">
            <img alt="captcha" class="pull-right" id="captcha"
                 onclick="this.src=this.src+'?d='+Math.random();"
                 th:src="@{/common/generate_cpacha}" title="点击刷新">
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-block btn-info" id="login_submit" onclick="void (0) "
                  type="button">立即登录
          </button>
        </div>
      </form>
      <hr>
      <footer class="col-sm-12 text-center">
        <p class="m-b-0">Copyright © 2021 <a th:href="${site.getUrl()}">【上实有限】</a>. All right
          reserved</p>
      </footer>
    </div>
  </div>
</div>
<script th:src="@{/static/admin/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/js/bootstrap.min.js}" type="text/javascript"></script>
<!--对话框-->
<script th:src="@{/static/admin/js/jconfirm/jquery-confirm.min.js}"></script>

<script th:src="@{/static/admin/js/myjs/confirm.js}" type="text/javascript"></script>

<script th:src="@{/static/admin/js/perfect-scrollbar.min.js}" type="text/javascript"></script>

<script type="text/javascript">

  function form_ajax(form, url) {
    let AjaxURL = url;
    $.ajax({
      type: "POST",
      dataType: "json",
      url: AjaxURL,
      data: form.serialize(),
      success: function (result) {
        if (result.code === 200) {
          window.location.href = '/sys/index.do';

        } else {
          $.confirm({
            title: '警告',
            content: result.msg,
            type: 'orange',
            typeAnimated: false,
            buttons: {
              close: {
                text: '关闭',
              }
            }
          });
        }

      },
      error: function (result) {
        $.confirm({
          title: '警告',
          content: "无法链接服务器！！！！",
          type: 'orange',
          typeAnimated: false,
          buttons: {
            close: {
              text: '关闭',
            }
          }
        });
      }

    });
  }

  $(document).ready(function () {
    $("#login_submit").click(function () {
      let username = $('#username').val();
      let password = $('#password').val();
      let vcode = $('#capcha').val();
      if (username === '') {
        $.confirm({
          title: '警告',
          content: '请填写用户名',
          type: 'orange',
          typeAnimated: false,
          buttons: {
            close: {
              text: '关闭',
              action: function () {
                $('#username').focus();
              }
            }
          }
        });
        return;
      }
      if (password === '') {
        $.confirm({
          title: '警告',
          content: '请填写密码',
          type: 'orange',
          typeAnimated: false,
          buttons: {
            close: {
              text: '关闭',
              action: function () {
                $('#password').focus();
              }
            }
          }
        });
        return;
      }

      if (vcode === '') {
        $.confirm({
          title: '警告',
          content: '请填写验证码',
          type: 'orange',
          typeAnimated: false,
          buttons: {
            close: {
              text: '关闭',
              action: function () {
                $('#capcha').focus();
              }
            }
          }
        });
        return;
      }

      form_ajax($('#login_form'), '/sys/login.ajax')

    });

    $('body').keyup(function (e) {
        if(e['keyCode'] === 13){
          $('#login_submit').click()
        }

    })

  })

</script>
</body>
</html>